<template>
	<div class="header-box">
		<div>
			<slot name="header-img"></slot>
		</div>
		<div >
			<slot name="header-sc" ></slot>
		</div>
		<div >
			<slot name="header-xingx"></slot>
		</div>
	</div>
</template>

<script>
	export default {
		methods: {
		
		}
	}
</script>

<style>
	.header-box {
		/* width: 750px; */
		height: 45px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: center;
		padding: 0 12px;
		box-sizing: border-box;
	}

	.header-box img {
		width: 22px;
		height: 22px;
		vertical-align: middle;
	}

	.header-nav1 {
		flex: 1;
		color: white;
		/* border: 1px solid red; */
	}

	.header-nav2 {
		flex: 6;

		/* border: 1px solid #369; */
		position: relative;
	}

	.header-nav2>img {
		position: absolute;
		left: 17px;
		top: 4px;

	}

	.input {
		width: 275px;
		height: 30px;
		border-radius: 25px;
		outline: none;
		border: none;
		padding-left: 40px;
		padding-top: 4px;
		box-sizing: border-box;
		font-size: 14px;
		opacity: 0.5;

	}

	.header-nav3 {
		color: white;
		flex: 1;
		/* border: 1px solid red; */
	}
</style>
